<template>
	<div class="productinfo-box">
		<div class="pinfo-box">
			<el-row>
				<el-col :span="4" style="text-align: right;">商品分类：</el-col>
				
				<el-col :span="20">
					<el-cascader 
					:clearable="true" 
					v-model="product.productCategoryId"
					:options="catList"
					:props="{label:'name',value:'id'}" 
					placeholder="商品名称" 
					 @change="handleChange"
					size="small"></el-cascader>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品名称：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.name" size="small" class="iptext"/></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">副标题：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.subTitle" size="small" class="iptext" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品品牌：</el-col>
				<el-col :span="20">
					<el-select v-model="product.brandId" placeholder="请选择" size="small" @change="handleChangeBrand">
						<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品介绍：</el-col>
				<el-col :span="20"><el-input type="text" size="small" v-model="product.description" class="iptext"/></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品货号：</el-col>
				<el-col :span="20"><el-input type="text" size="small" v-model="product.productSn" class="iptext" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品售价：</el-col>
				<el-col :span="20"><el-input type="text" size="small" v-model="product.price" class="iptext" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">市场价：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.originalPrice" size="small" class="iptext"/></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品库存：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.stock" size="small" class="iptext" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">计量单位：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.unit" size="small" class="iptext" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">商品重量：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.weight" class="iptext" size="small" style="margin-right:20px;width:300px;"/>克</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" style="text-align: right;">排序：</el-col>
				<el-col :span="20"><el-input type="text" v-model="product.sort" size="small" class="iptext"/></el-col>
			</el-row>
		</div>
		<div class="btn-box">
			<el-button size="small" type="primary" @click="$emit('input',1)">下一步，填写商品促销</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getCatList
	} from '@/api/productCat.js'
	
	import {
		getBrandList
	} from '@/api/productBrand.js'
	
	export default{
		data(){
			return{
				catList:[],
				brandList:[]
			}
		},
		methods:{
			handleChange(val){
				this.product.productCategoryId = val[1];
				
				this.catList.forEach(item=>{
					if(item.id == this.product.productCategoryId){
						this.product.productCategoryName = item.name;
					}else{
						item.children.forEach(it=>{
							if(it.id == this.product.productCategoryId){
								this.product.productCategoryName = it.name;
							}
						})
					}
				})
			},
			handleChangeBrand(val){
				this.brandList.forEach(item=>{
					if(item.id == this.product.brandId){
						this.product.brandName = item.name;
					}
				})
			}
		},
		props:['value','product'],
		mounted() {
			getCatList().then(resp=>{
				this.catList = resp.data;
			})
			getBrandList().then(resp=>{
				this.brandList = resp.data;
			})
		}
	}
</script>

<style lang="scss">
	.productinfo-box{
		.btn-box{
			text-align: center;
		}
	}
	.pinfo-box{
		margin-top:50px;
		.el_input {
			height:32px;
			.el_input__inner{
				height:32px !important;
			}
		}
		.el-row{
			margin:20px;
			line-height: 32px;
		}
		
		
	}
</style>
